<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点击回到顶部</title>
		<script src="jquery/jquery-3.1.1.min.js"></script>
		<style>
		body{
			margin: 0;
			height: 1000px;
		}
			div{
				width: 50px;
				height: 50px;
				background: cornflowerblue;
				color: wheat;
				font-size: 12px;
				position: fixed;
				right: 0;
				bottom: 0;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div>点击回到顶部</div>
		<script>
			$('div').hide();
			$(window).scroll(function(){
				console.log($(this))
				if($(window).scrollTop() > 500){
					$('div').fadeIn()
				}else{
					$('div').fadeOut()
				}
			})
			$('div').click(function(){
//				$('div').css('top',0)
				$('html').animate({
					scrollTop:0
				},1000)
			})
		</script>
	</body>
</html>
